import PropTypes from "prop-types";
import React, { memo } from "react";
import RoomItemWrapper from "./style";
import { Rating } from "@mui/material";
import { Carousel } from "antd";
import IconArrowLeft from "@/assets/svg/icon-arrow-left";
import IconArrowRight from "@/assets/svg/icon-arrow-right";
import { createRef } from "react";

const RoomItem = memo((props) => {
  const { itemData, itemrWidth } = props;
  const slickRef = createRef();
  // 定义切换图片
  function imgClickHandle(isClick = true) {
    isClick?slickRef.current.prev():slickRef.current.next()
  }
  return (
    <RoomItemWrapper
      textcolor={itemData?.verify_info?.text_color || "#39576a"}
      itemwidth={itemrWidth}
    >
      <div className="inner">
        <div className="cover">
          <img src={itemData.picture_url}/>
        </div>
        <div className="content">
          <div className="desc">
            {itemData.verify_info.messages.join(" · ")}
          </div>
          <div className="name">{itemData.name}</div>
          <div className="price">￥{itemData.price}/晚</div>
          <Rating
            name="simple-controlled"
            value={itemData.star_rating ?? 5}
            precision={0.1}
            sx={{ fontSize: "12px", color: "#00848A" }}
          />
          <span className="count">{itemData.reviews_count}</span>
          {itemData.bottom_info && (
            <span className="extra">· {itemData.bottom_info?.content}</span>
          )}
        </div>
      </div>
    </RoomItemWrapper>
  );
});

RoomItem.propTypes = {
  itemData: PropTypes.object,
  itemrWidth: PropTypes.string,
};

export default RoomItem;
